<template>
    <div class="itemMusicTop">
        <img :src="playlist.coverImgUrl" alt="" class="bgimg">
        <div class="top">
            <div class="topleft">
                <svg class="icon" aria-hidden="true" @click="back">
                    <use xlink:href="#icon-xiangzuojiantou"></use>
                </svg>
                <span>歌单</span>
            </div>
            <div class="topright">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao2"></use>
                </svg>
            </div>
        </div>
        <div class="title">
            <div class="titleimg">
                <img :src="playlist.coverImgUrl" alt="">
            </div>
            <div class="titledetail">
                <span class="titlename">{{playlist.name}}</span>
                <div class="creator">
                    <img :src="playlist.creator.backgroundUrl" alt="">
                    <span>{{playlist.creator.nickname}}</span>
                </div>
                <span class="description">{{playlist.description}}</span>
            </div>
        </div>
        <div class="iconlist">
            <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xinxi"></use>
            </svg>
            <span>{{playlist.commentCount}}</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenxiang"></use>
            </svg>
            <span>{{playlist.shareCount}}</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiazai"></use>
            </svg>
            <span>下载</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-show_duoxuan"></use>
            </svg>
            <span>多选</span>
        </div>
        </div>
    </div>
</template>

<script>
export default {
   name:'ItemMusicTop',
   props:['playlist'],
   setup(props) {
    //    如果拿不到数据，就拿sessionStorege的数据
       props.playlist.creator=""
       if(props.playlist.creator=''){
           let data = sessionStorage.getItem('itemDetail')
           this.playlist = JSON.parse(data)
       }
   },
   methods: {
       back(){
           this.$router.push('/')
       },
   },
   
}
</script>

<style lang='less'>
    .itemMusicTop{
        width: 100%;
        position: relative;
        .bgimg{
            width: 100%;
            height: 10rem;
            position: absolute;
            z-index: -100;
            filter: blur(20px);

        }
        .top{
            width: 100%;
            color: aliceblue;
            // position: fixed;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:0.4rem 0.2rem;
            .topleft{
                display: flex;
                width: 25%;
                justify-content: space-between;
                align-items: center;
                font-size: 0.48rem;
                .icon{
                    width: 0.48rem;
                    height: 0.48rem;
                }
            }
            .topright{
                display: flex;
                width: 20%;
                justify-content: space-between;
                .icon{
                    width: 0.48rem;
                    height: 0.48rem;
                }
            }
        }
        .title{

            width: 100%;
            display: flex;
            padding: .2rem .3rem;
            .titleimg{
                width: 40%;
                img{
                    width: 3rem;
                    height: 3rem;
                    border-radius: .3rem;
                }
            }
            .titledetail{
                width: 60%;
                color: #fff;
                padding-left: .6rem;
                
                .titlename{
                    font-size: .36rem;
                    font-weight: 600;
                }
                .creator{
                    display: flex;
                    align-items: center;
                    padding: 0.2rem 0;
                    img{
                        width: .8rem;
                        height: .8rem;
                        border-radius: .8rem;
                    }
                    span{
                        margin-left: .2rem;
                        opacity: 0.7;
                    }
                }
                .description{
                    font-size: .24rem;
                    opacity: 0.7;
                }
            }
        }
        .iconlist{
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #fff;
            .iconItem{
                width: 25%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .icon{
                    width: .5rem;
                    height: .5rem;
                    margin-top: .2rem;
                    fill: #fff;
                }
                span{
                    margin-top: .2rem;
                }
            }
        }
    }
</style>
